<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年08月22日 10:59
 * @Copyright:  2022-2023
!-->
<template>
  <div class="directory-container">
    <el-card class="directory-card" shadow="always">
      <div class="directory-title">
        目录
      </div>
      <div class="directory-content" :style="{ maxHeight: [null, '', undefined].includes(token) ? 'calc(100vh - 740px)' : 'calc(100vh - 495px)'}">
        <el-tree :data="tocDataTree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import store from "@/store";

@Component({})
export default class directory extends Vue {

  /** 目录树数据 */
  @Prop()
  private tocDataTree:any;

  /** token */
  get token() {
    return store.getters.token;
  }

  /** 字段映射 */
  private defaultProps:any = {
    children: 'children',
    label: 'label'
  }

  /** 实现跳转锚点 */
  private handleNodeClick(data: any) {
    let tag = 'h-'+data.id;
    const el: any = document.getElementById(tag);
    if (el !== null) {
      // 得到h标签的位置
      let anchorH = el.offsetTop
      this.$emit('changeScrollHeight', anchorH);
    }
  }

}
</script>
<style scoped lang="scss">
.directory-container {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  .directory-card {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    .directory-title {
      line-height: 30px;
      font-weight: 600;
      font-size: 20px;
      color: #3B3E41;
      padding: 0 20px;
    }
    .directory-content {
      overflow-y: auto;
      padding-right: 15px;
    }
  }
}

::v-deep .el-card__body {
  padding-left: 5px !important;
  padding-right: 0 !important;
}

::v-deep .el-tree-node__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
